<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <!-- <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>直播打卡</div>
          -->
        <div class="hei10"></div>


        <div class="t_table_box">
          <div
            style="background-color: rgb(218, 231, 245);color:rgb(100, 112, 118); padding: 10px 20px; font-size: 14px;margin-bottom:20px; border-radius: 10px;">
            直播统计可以帮助您便捷的统计主播绩效，且可以实时显示主播当前直播销售情况
            <el-button @click="downDate" type="text" style="margin-left:30px;"><i
                class="el-icon-download"></i>点击这里下载使用说明</el-button>
          </div>
          <div class="kflexbc">
            <div @click="daka" class="kflexcc" style="width: 140px; color: #fff; font-size: 20px; height: 56px; cursor: pointer; background: url('https://file.storep.91haoka.cn/gantanhao/an1.png') no-repeat; background-size: cover;">直播打卡</div>
            <div @click="tozbgl" class="kflexcc" style="width: 140px; color: #fff; font-size: 20px; height: 56px; cursor: pointer; background: url('https://file.storep.91haoka.cn/gantanhao/an1.png') no-repeat; background-size: cover;">主播管理</div>
          </div>

          <div class="kflexbc" style="margin-top: 85px; margin-bottom: 20px;" v-if="shop_id == 50481 || shop_id == 304676">
            <div style="border: 10px rgb(223, 232, 233) solid;  border-radius: 20px; padding: 20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi2.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui1.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui1.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui1.value}}</div>
            </div>

            <div style="border: 10px rgb(249, 212, 104) solid;  border-radius: 20px; padding:  20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi1.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui2.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui2.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui2.value}}</div>
            </div>

            <div style="border: 10px rgb(248, 204, 156) solid;  border-radius: 20px; padding:  20px 40px 20px 20px; width: 27%; position: relative;" class="kflexbc">
              <div style="position: absolute; left: 50%; top: -60px; width: 130px; margin-left: -70px;"><img src="https://file.storep.91haoka.cn/gantanhao/wi3.png"  style="width: 130px;"></div>
              <div class="kflexc">
                <div><img :src="zhandui0.img" style="width: 100px; height: 100px;"></div>
                <div style="font-size: 36px; margin-left: 20px;">{{zhandui0.name}}</div>
              </div>
              <div style="font-size: 36px;">{{zhandui0.value}}</div>
            </div>

          </div>

         <div v-if="shop_id == 50481 || shop_id == 304676" style="background: url('https://file.storep.91haoka.cn/gantanhao/an2.png') no-repeat; background-size: cover; height: 140px; color: #fff; padding-right: 40px; margin-top: 40px; font-size: 20px; margin-bottom: 20px;" class="kflexbc">
            <div class="kflexc">
              <div style="font-size: 36px; padding: 0 30px; border-right: 1px #fff solid;">{{geren.name}}</div>

              <div style="margin-left: 40px;"><img src="https://file.storep.91haoka.cn/gantanhao/tu.png" style="width: 20px;"></div>
              <div style="margin-left: 10px;">{{mingci}}</div>

              <div style="margin-left: 60px;"><img src="https://file.storep.91haoka.cn/gantanhao/tu1.png" style="width: 20px;"></div>
              <div style="margin-left: 10px;">{{geren.type}}</div>

              <div style="margin-left: 60px;"><img src="https://file.storep.91haoka.cn/gantanhao/tu2.png" style="width: 20px;"></div>
              <div style="margin-left: 10px; padding-right: 60px;  border-right: 1px #fff solid; line-height: 41px;">{{geren.title}}</div>

              <div style="margin-left: 80px;">
                <div style="font-size: 16px; margin-bottom: 10px;">销量</div>
                <div style="font-size: 36px;">{{geren.sales.total_order}}</div>
              </div>
              <div style="margin-left: 80px;">
                <div style="font-size: 16px; margin-bottom: 10px;">真实</div>
                <div style="font-size: 36px;" v-if="geren.sales.total_order != '--'">{{geren.sales.total_order - geren.sales.virtually_order}}</div>
                <div style="font-size: 36px;" v-if="geren.sales.total_order == '--'">--</div>
              </div>
              <div style="margin-left: 80px;">
                <div style="font-size: 16px; margin-bottom: 10px;">引流</div>
                <div style="font-size: 36px;">{{geren.sales.virtually_order}}</div>
              </div>
            </div>


            <div class="kflexc">
              <div @click="handleEdit(geren.id)" v-if="geren.id" class="kflexcc" style="width: 140px; cursor: pointer; margin-left: 80px; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an4.png') no-repeat; background-size: cover;">下播</div>
              <div @click="replace(geren)" v-if="geren.id" class="kflexcc" style="width: 140px; cursor: pointer; margin-left: 30px; color: #fff; font-size: 20px; height: 56px; background: url('https://file.storep.91haoka.cn/gantanhao/an3.png') no-repeat; background-size: cover;">换人续播</div>
            </div>

          </div>

          <div style=" margin-bottom: 20px;" class="kflexc se"
            v-if="shop_id == 50481 || shop_id == 304676">
            <div class="kflexc" style="background: rgb(246, 249, 252); width: 330px; margin-right: 20px;  border-radius: 10px;">
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队划分</div>
              <el-select v-model="huafen" @change="suansuan" style="width: 250px;" placeholder="请选择战队划分方式">
                <el-option label="按人划分" :value="1"></el-option>
                <el-option label="按直播间划分" :value="2"></el-option>
              </el-select>
            </div>

            <div style="background: rgb(246, 249, 252); border-radius: 10px;" class="kflexc">
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队</div>
              <el-select v-model="zhandui" clearable @change="gettableData2" placeholder="请选择战队">
                <el-option label="贾杨战队" value="1"></el-option>
                <el-option label="邵尉战队" value="2"></el-option>
                <el-option label="JJS战队" value="3"></el-option>
              </el-select>
            </div>
          </div>
          <!-- <div style="position:relative; width: 1677px;" v-if="shop_id == 50481 || shop_id == 304676">
            <div style="position: absolute; left: 10px; top: 0; padding: 8px;"> <img
                src="https://file.storep.91haoka.cn/gantanhao/pk3.png"
                style="width: 78px; height: 78px; display: block; border: 4px #fff solid; border-radius: 10px;"></div>
            <div
              style="position: absolute; left: 160px; top: 0; height: 102px; line-height: 102px;  color: rgb(255, 255, 255); font-size: 48px; font-weight: bold;"
              class="kflexc">贾杨战队</div>
            <img src="https://file.storep.91haoka.cn/gantanhao/pk1.png">
            <div
              style="position: absolute; right: 160px; top: 0; height: 102px; line-height: 102px;  color: rgb(255, 255, 255); font-size: 48px; font-weight: bold;"
              class="kflexc">邵尉战队</div>
            <div style="position: absolute; right: 10px; top: 0; padding: 8px;"> <img
                src="https://file.storep.91haoka.cn/gantanhao/pk4.png"
                style="width: 78px; height: 78px;  display: block; border: 4px #fff solid; border-radius: 10px;"></div>
          </div> -->

<!--          <div
            style="position:relative; height: 36px; background: rgb(90, 54, 255); border-radius: 10px; margin: 15px 0;  width: 1677px; overflow: hidden;"
            v-if="shop_id == 50481 || shop_id == 304676">
            <div
              style="background: rgb(245, 28, 100);  font-weight: bold; box-sizing: border-box; position: absolute; border-radius: 10px; left: 0; top: 0; height: 36px; line-height: 36px; text-align: left; color: #fff; padding-left: 20px; overflow: hidden; "
              :style="{width:ssw}">
              贾杨战队总销量<span style="margin:0 20px;">{{d1}}单</span>（{{lingxianluohou}}）</div>
            <img src="https://file.storep.91haoka.cn/gantanhao/pk2.png"
              style="position: absolute; left: 50%; bottom: 0; margin-left: -30px;">
            <div
              style="text-align: right; padding-right: 20px; height: 36px; line-height: 36px; color: #fff; position: absolute; top: 0; right: 0px; font-weight: bold;">
              <span style="margin-right: 20px;">{{d2}}单</span>邵尉战队总销量</div>
          </div> -->
          <!-- <div class="kflexc se" style="margin-bottom: 20px;" v-if="shop_id == 50481 || shop_id == 304676">
            <div style="background: rgb(246, 249, 252);" class="kflexc">
              <div style="width:80px; text-align: center; color: #606266; font-size: 14px;">战队</div>
              <el-select v-model="zhandui" clearable @change="gettableData2" placeholder="请选择战队">
                <el-option label="贾杨战队" value="1"></el-option>
                <el-option label="邵尉战队" value="2"></el-option>
                <el-option label="JJS战队" value="3"></el-option>
              </el-select>
            </div>
          </div> -->
          <!-- <div style="display: flex;justify-content: space-between;">
            <el-button @click="daka" style="margin-bottom: 20px;" type="danger">直播打卡</el-button>
            <el-button @click="tozbgl" style="margin-bottom: 20px;" type="danger">主播管理</el-button>
          </div> -->
          <el-table :header-cell-style="{
                        background:'#F4F4F4',
                        color:'#7D8087'}" :data="tableData2" @sort-change="sortchange" stripe style="width: 100%; margin-top: 20px;" :default-sort = "{prop: 'sales.meixiaoshi', order: 'descending'}">
            <el-table-column label="排名" center>
              <template slot-scope="scope">

                <div v-if="scope.$index != 0 && scope.$index != 1 && scope.$index != 2 ">{{scope.$index+1}}</div>
                <div v-if="scope.$index == 0"><img src="https://file.storep.91haoka.cn/gantanhao/di1.png" style="width: 35px;"></div>
                <div v-if="scope.$index == 1"><img src="https://file.storep.91haoka.cn/gantanhao/di2.png" style="width: 35px;"></div>
                <div v-if="scope.$index == 2"><img src="https://file.storep.91haoka.cn/gantanhao/di3.png" style="width: 35px;"></div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="直播中">
            </el-table-column>
            <el-table-column prop="team" label="所属战队" v-if="shop_id == 50481 || shop_id == 304676">
            </el-table-column>

            <el-table-column prop="type" label="直播类型">
            </el-table-column>
            <el-table-column prop="title" label="直播标题">
            </el-table-column>
            <el-table-column width="200px" prop="created_at" label="开播时间">
            </el-table-column>
            <el-table-column label="直播时长">
              <template slot-scope="scope">
                {{timediff(scope.row.created_at)}}
              </template>
            </el-table-column>
            <el-table-column sortable prop="sales.total_order" label="销量"></el-table-column>
            <el-table-column sortable prop="sales.meixiaoshi" label="每小时销量"></el-table-column>
            <el-table-column sortable prop="sales.zhenshi" v-if="this.shop_id == 50481 || this.shop_id == 304676" label="真实"></el-table-column>
            <el-table-column sortable prop="sales.virtually_order" v-if="this.shop_id == 50481 || this.shop_id == 304676" label="引流"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" v-if="shop_id != 50481 && shop_id != 304676" @click="handleEdit( scope.row.id)">下播</el-button>
                <el-button size="mini" type="text" v-if="shop_id != 50481 && shop_id != 304676" @click="replace(scope.row)">换人续播</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <foot></foot> -->
    <!-- 打开弹窗 -->
    <el-dialog title="直播打卡" :visible.sync="dakashow" width="600px">
      <div class="t_daka_box">
        <div>
          <el-select v-model="choosezb" value-key="id" class="t_select_box" placeholder="请选择主播">
            <el-option v-for="(item,index) in zblistdata" :key="index" :label="item.name" :value="item"></el-option>
          </el-select>
          <el-select @change="nowtype" :disabled="isreplace" v-model="choosezbtype" class="t_select_box"
            style="margin-top: 20px;margin-bottom:20px" value-key="label" placeholder="请选择直播类型">
            <el-option v-for="(item,index) in zbtypedata" :key="index" :label="item.label" :value="item"></el-option>
          </el-select>
          <el-select :disabled="isreplace" v-model="choosezbtitle" class="t_select_box" value-key="label"
            placeholder="请选择销售页名称或店铺名">
            <el-option v-for="(item,index) in zbtitledata" :key="index" :label="item.label" :value="item"></el-option>
          </el-select>
          <router-link to="/addliucheng">
            <el-button type="text">没有找到直播间？</el-button>
          </router-link>
        </div>
        <div @click="startzb" class="t_daka_btn">
          开始直播
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
import moment from 'moment'


  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'zhibodaka',
    data() {
      return {
        tableData: [],
        dakashow: false,
        zblistdata: [],
        choosezb: '',
        zbtypedata: [],
        choosezbtype: '',
        zbtitledata: [],
        choosezbtitle: '',
        xunhuan: '',
        isreplace: false,
        replaceid: '',
        ws: null,
        shop_id: "",
        ssw: '300px',
        zhanduilist: '',
        zhandui: "",
        d1: 0,
        d2: 0,
        d3: 0,
        lingxianluohou: "",
        huafen: 1,
        jisuandeshuju: [],
        jisuandeshuju2: [],
        geren:{sales:""},
        zhandui1:{name:"",img:'',value: 0},
        zhandui2:{name:"",img:'',value: 0},
        zhandui0:{name:"",img:'',value: 0},
        mingci:0
      }
    },


    created() {

      this.shop_id = JSON.parse(localStorage.getItem('SHOP')).shop_id;

      //主播列表
      this.zblist()
      //直播类型
      this.zbtype()

      //在播列表
      // this.getlist()
      //地址配置,用于下载模板
      if (window.location.href.indexOf("91haoka_platform") > -1) {
        console.log("线上项目，谨慎操作。")
        this.url = window.location.origin + "/91haoka_platform/"
      } else {
        this.url = ""
      }

      if(window.location.origin == 'https://test.91haoka.cn' || window.location.origin == 'http://118.190.155.55' || process.env.NODE_ENV == 'development'){
        this.ws = new WebSocket('wss://test.91haoka.cn:8885');
      }else{
        this.ws = new WebSocket('wss://ws.91haoka.cn:8995');
      }



      //ws://118.190.155.55:8995   测试
      //wss://test.91haoka.cn:8885 测试
      //wss://ws.91haoka.cn:8995   正式

      //链接socket
      this.socket()




    },
    beforeDestroy() {
      clearInterval(this.xunhuan);
      this.xunhuan = ''

      //完成通信后关闭WebSocket连接
      this.ws.close();
    },
    methods: {
      sortchange:function( column ){

        let arr = JSON.parse(JSON.stringify(this.tableData))

        if(column.order == 'ascending'){
          arr.sort((a, b) => {
            if(column.prop == 'sales.total_order'){
              return a.sales.total_order - b.sales.total_order
            }
            if(column.prop == 'sales.meixiaoshi'){
              return a.sales.meixiaoshi - b.sales.meixiaoshi
            }
            if(column.prop == 'sales.zhenshi'){
              return a.sales.zhenshi - b.sales.zhenshi
            }
            if(column.prop == 'sales.virtually_order'){
              return a.sales.virtually_order - b.sales.virtually_order
            }
          });
        }
        if(column.order == 'descending'){
          arr.sort((a, b) => {
            if(column.prop == 'sales.total_order'){
              return b.sales.total_order - a.sales.total_order
            }
            if(column.prop == 'sales.meixiaoshi'){
              return b.sales.meixiaoshi - a.sales.meixiaoshi
            }
            if(column.prop == 'sales.zhenshi'){
              return b.sales.zhenshi - a.sales.zhenshi
            }
            if(column.prop == 'sales.virtually_order'){
              return b.sales.virtually_order - a.sales.virtually_order
            }
          });

        }

        if(column.order == null){

        }


        arr.forEach((item,index)=>{
          if(this.geren.id == item.id){
            this.mingci = index + 1
          }
        })

      },
      gettableData2: function() {
        let arr = []
        arr = this.tableData
        this.tableData2 = arr
        if (this.zhandui == 1) {
          this.tableData2 = arr.filter(item => {
            return item.team_id == 1
          })
        }
        if (this.zhandui == 2) {
          this.tableData2 = arr.filter(item => {
            return item.team_id == 2
          })
        }
        if (this.zhandui == 3) {
          this.tableData2 = arr.filter(item => {
            return item.team_id == 3
          })
        }
      },
      suansuan: function() {
        var that = this

        that.d1 = 0
        that.d2 = 0
        that.d3 = 0
        that.ssw = '0'
        that.lingxianluohou = ''

        let jisuandeshuju = []
        if (this.huafen == 1) {
          jisuandeshuju = that.jisuandeshuju
        }
        if (this.huafen == 2) {
          jisuandeshuju = that.jisuandeshuju2
        }
        jisuandeshuju.forEach(item => {
          if (item.team_id == 1) {
            that.d1 = that.d1 + item.total_num
          }
          if (item.team_id == 2) {
            that.d2 = that.d2 + item.total_num
          }
          if (item.team_id == 3) {
            that.d3 = that.d3 + item.total_num
          }
          // that.ssw = (1677 * (that.d1 / (that.d1 + that.d2))) + 'px'
        })
        // if (that.d1 > that.d2) {
        //   that.lingxianluohou = '领先' + (that.d1 - that.d2) + '单'
        // } else {
        //   that.lingxianluohou = '落后' + (that.d2 - that.d1) + '单'
        // }
        let objects = [
          { name:"JJS战队",img:'https://file.storep.91haoka.cn/gantanhao/pk99.png',value: that.d3 },
          { name:"邵尉战队",img:'https://file.storep.91haoka.cn/gantanhao/pk4.png',value: that.d2 },
          { name:"贾杨战队",img:'https://file.storep.91haoka.cn/gantanhao/pk3.png',value: that.d1 },
        ];

        objects.sort(function (a, b) {
          return a.value - b.value;
        });



        this.zhandui0 = objects[0]
        this.zhandui1 = objects[1]
        this.zhandui2 = objects[2]



      },
      socket() {
        var that = this

        console.log(window.location.host)
        // 获取连接状态

        // console.log('ws连接状态1：' + this.ws.readyState);
        //监听是否连接成功
        this.ws.onopen = function() {
          console.log('ws连接状态2：' + that.ws.readyState);
          //连接成功则发送登录请求
          let message = {
            "type": "live-stream",
            'shop_id': JSON.parse(localStorage.getItem('USER')).id
          }
          that.ws.send(JSON.stringify(message));
        }


        //接听服务器发回的信息并处理展示
        this.ws.onmessage = function(data) {


          //列表赋值
          if (JSON.parse(data.data).type != '@heart@') {

            that.tableData = JSON.parse(data.data).list

            that.tableData.forEach(item=>{

              let fenzhong = parseInt((moment() - moment(item.created_at))/1000/60)
              if(fenzhong == 0){
                fenzhong = 1
              }

              that.$set(item.sales,'zhenshi',item.sales.total_order-item.sales.virtually_order)

              that.$set(item.sales,'meixiaoshi',parseInt(item.sales.total_order/fenzhong*60))
            })

            that.gettableData2()

            that.jisuandeshuju = JSON.parse(data.data).pk

            that.jisuandeshuju2 = JSON.parse(data.data).live_pk

            if(JSON.parse(data.data).streaming != ''){
              that.geren = JSON.parse(data.data).streaming
              let arr = JSON.parse(JSON.stringify(that.tableData))

              arr.sort((a, b) => {
                return  b.sales.meixiaoshi - a.sales.meixiaoshi
              });

              arr.forEach((item,index)=>{
                if(that.geren.id == item.id){
                  that.mingci = index + 1
                  console.log(that.mingci)
                }
              })
            }else{
              that.geren = {
                id:"",
                name:'--',
                sales:{
                  total_order:'--',
                  virtually_order:'--'
                },
                type:"--",
                title:'--',
                zhenshi:'--',
                meixiaoshi:'--'

              }
              that.mingci = '--'
            }

            that.suansuan()

          }
        }
        // 监听连接关闭事件
        this.ws.onclose = function() {
          // 监听整个过程中websocket的状态
          // console.log('ws连接状态3：' + that.ws.readyState);
        }
        // 监听并处理error事件
        this.ws.onerror = function(error) {
          console.log('ws连接状态4：' + that.ws.readyState);
          console.log(error);
        }

      },
      //跳转
      tozbgl() {
        this.$router.push({
          path: '/zhibotongji/zhuboguanli',
          query: {
            type: 2
          }
        })
      },
      //下载模板
      downDate: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '直播统计使用说明.pdf');
        a.setAttribute('href', this.url + 'static/zbdk.pdf');
        a.click();
      },
      //时间差
      timediff(begin_time) {

        var end_time = this.getNowDate()
        //年月日时分秒转换为时间戳
        let beginTime = (new Date(begin_time).getTime()) / 1000;
        let endTime = (new Date(end_time).getTime()) / 1000;
        var starttime = ''
        var endtime = ''
        if (beginTime < endTime) {
          starttime = beginTime;
          endtime = endTime;
        } else {
          starttime = endTime;
          endtime = beginTime;
        }
        //计算天数
        var timediff = endtime - starttime;
        var days = parseInt(timediff / 86400);
        //计算小时数
        var remain = timediff % 86400;
        var hours = parseInt(remain / 3600);
        //计算分钟数
        var remain = remain % 3600;
        var mins = parseInt(remain / 60);
        var res = hours + '小时' + mins + '分';
        return res;
      },
      timediff2(item) {
        console.log(item.sales.total_order/((moment() - moment(item.created_at))/1000/60))




        // var end_time = this.getNowDate()
        // //年月日时分秒转换为时间戳
        // let beginTime = (new Date(begin_time).getTime()) / 1000;
        // let endTime = (new Date(end_time).getTime()) / 1000;
        // var starttime = ''
        // var endtime = ''
        // if (beginTime < endTime) {
        //   starttime = beginTime;
        //   endtime = endTime;
        // } else {
        //   starttime = endTime;
        //   endtime = beginTime;
        // }
        // //计算天数
        // var timediff = endtime - starttime;
        // console.log(timediff/60)
        // return timediff/60

      },
      //获取当前时间年月日时分秒
      getNowDate() {
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
        // 给一位数的数据前面加 “0”
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
          day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
          minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
          seconds = "0" + seconds;
        }
        // console.log(year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds)
        return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
      },
      //主播列表
      zblist() {
        axios.get('/api/live-stream/streamer/list').then((response) => {
          // console.log(response.data.data)
          this.zblistdata = response.data.data
        })
      },
      //直播类型
      zbtype() {
        axios.get('/api/live-stream/type').then((response) => {
          // console.log(response.data.data)
          for (let i in response.data.data) {
            // console.log(i)
            this.zbtypedata.push({
              'label': response.data.data[i],
              'value': i
            })
          }
        })
      },
      //当前直播类型
      nowtype(val) {

        //直播标题
        this.zbtitle(val.value)
        this.choosezbtitle = ''
        this.zbtitledata = []
      },
      //直播标题
      zbtitle(type, title) {

        axios.get('/api/live-stream/title', {
          params: {
            type: type
          }
        }).then((response) => {
          for (let i in response.data.data) {
            // console.log(response.data.data[i])
            this.zbtitledata.push({
              'label': i,
              'value': response.data.data[i]
            })

            if (this.isreplace) {

              if (title == i) {

                this.choosezbtitle = {
                  'label': i,
                  'value': response.data.data[i]
                }
                console.log(this.choosezbtitle)
              }
            }
          }
        })
      },

      //在播列表
      getlist() {
        axios.get('/api/live-stream/list').then((response) => {
          // console.log(response)
          this.tableData = response.data.data
          // if(this.tableData.length!=0){
          // 	// console.log('有值')
          // 	if(!this.xunhuan){
          // 		this.xunhuan = setInterval(()=>{
          // 			this.getlist()

          // 		},5000)
          // 	}
          // }else{
          // 	console.log('无值')
          // 	clearInterval(this.xunhuan);
          // 	this.xunhuan=''
          // }
        })
      },
      //下播
      handleEdit(id) {
        this.$confirm('是否确认下播?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/live-stream/streamer/down', {
            id: id
          }).then((response) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });

            let message = {
              "type": "live-stream",
              'shop_id': JSON.parse(localStorage.getItem('USER')).id
            }
            this.ws.send(JSON.stringify(message));

            //在播列表
            this.getlist()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //打卡
      daka() {
        this.isreplace = false
        this.dakashow = true
        this.choosezb = ''
        this.choosezbtype = ''
        this.choosezbtitle = ''
        this.zbtitledata = []
      },
      //替换上播
      replace(row) {
        console.log(row)
        this.replaceid = row.streamer_id
        this.isreplace = true
        this.dakashow = true
        this.choosezb = ''
        this.choosezbtype = ''
        this.choosezbtitle = ''
        this.zbtitledata = []
        //赋值直播类型
        for (var x = 0; x < this.zbtypedata.length; x++) {
          if (this.zbtypedata[x].label == row.type) {
            console.log(this.zbtypedata[x])
            this.choosezbtype = this.zbtypedata[x]
            //直播标题
            this.zbtitle(this.zbtypedata[x].value, row.title)
          }
        }

      },
      //开始直播
      startzb() {
        if (this.choosezb == '') {
          this.$message.error('请选择主播');
          return
        } else if (this.choosezbtype == '') {
          this.$message.error('请选择直播类型');
          return
        } else if (this.choosezbtitle == '') {
          this.$message.error('请选择直播标题');
          return
        }

        // console.log(this.choosezb.name,this.choosezbtype.label,this.choosezbtitle.label)

        var textval = this.choosezb.name + '-' + this.choosezbtype.label + '-' + this.choosezbtitle.label + ' 是否确认开启直播'
        this.$confirm(textval, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          if (this.isreplace) {
            //替换直播
            axios.post('/api/live-stream/replace/streamer', {
              old_streamer_id: this.replaceid,
              title: this.choosezbtitle.label,
              streamer_id: this.choosezb.id,
            }).then((response) => {
              if (response.data.msg.code == 0) {
                this.dakashow = false
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });

                let message = {
                  "type": "live-stream",
                  'shop_id': JSON.parse(localStorage.getItem('USER')).id
                }
                this.ws.send(JSON.stringify(message));

                //在播列表
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }

            })
          } else {
            //新建直播
            axios.post('/api/live-stream/create', {
              streamer_id: this.choosezb.id,
              type: this.choosezbtype.label,
              title: this.choosezbtitle.label,
              source: this.choosezbtitle.value,
            }).then((response) => {
              if (response.data.msg.code == 0) {
                this.dakashow = false
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                let message = {
                  "type": "live-stream",
                  'shop_id': JSON.parse(localStorage.getItem('USER')).id
                }
                this.ws.send(JSON.stringify(message));
                //在播列表
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }

            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }

    }
  }
</script>


<style lang="scss" scoped>
  .index {
    .se {
      /deep/ .el-input__inner {
        background: transparent;
        border: 0;
      }
    }

    .t_table_box {

      padding: 0 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .t_daka_box {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
    }

    .t_daka_btn {
      width: 160px;
      height: 160px;
      background-color: #FF5252;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .t_select_box {
      display: block;
      width: 270px;
      margin-right: 20px;
    }

    .see {
      color: #409EFF;
      margin: 20px 0;
      cursor: pointer;
    }

    .cpflex {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .kucun {
      /deep/ .el-input {
        width: 200px;
      }

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }



    .o_ul {
      background: #F9F9F9;
      display: flex;

      .o_li {
        flex-basis: 160px;
        line-height: 45px;
        display: block;
        color: #727272;
        border-top: 3px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .act {
        border-top: 3px #DD2727 solid;
        background: #FFFFFF;
      }
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .bsm {
      padding: 20px 20px 0 20px;

      /deep/ .el-input {
        width: 220px;
      }
    }

    .row2 {
      color: #FFF;
      margin-top: 20px;

      a {
        color: #FFF;
      }
    }

    .con {
      margin: 20px;
      border: 1px #EAEAEA solid;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }

    .el-pagination {
      text-align: right;
      margin-right: 20px;
      padding-bottom: 50px;
    }


  }
</style>
